<template>
  <div class="app-container">
    <el-input class="search-box" placeholder="关键字" v-model="keyword">
    </el-input>

    <el-button type="primary" icon="el-icon-search" @click="handleSearch">
      搜索
    </el-button>

    <el-button type="primary" icon="el-icon-edit" @click="handleAdd">
      添加
    </el-button>

    <el-table :data="adminList" border fit highlight-current-row style="width: 100%">
      <el-table-column label="用户名">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户昵称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="角色组">
        <template slot-scope="scope">
          <el-select v-if="scope.row.edit" v-model="scope.row.role" placeholder="请选择">
            <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span v-else>{{ scope.row.role }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <div class="button-wrapper" v-if="scope.row.editable">
            <el-button
              size="small"
              type="success"
              @click="handleConfirm(scope.$index, scope.row)">
              确认
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleCancel(scope.$index, scope.row)">
              取消
            </el-button>
          </div>
          <div class="button-wrapper" v-else>
            <el-button
              size="small"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope)">
              删除
            </el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加管理员" :visible.sync="dialogFormVisible">
      <el-form :model="newAdminData" :rules="formRules" label-width="120px">
        <el-form-item label="账号">
          <el-input v-model="newAdminData.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="newAdminData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newAdminData.password"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        adminList: [
          {
            username: 'yejian',
            nickname: '叶剑',
            role: '普通用户',
            editable: false
          },
          {
            username: 'yejian',
            nickname: '叶剑',
            role: '管理员',
            editable: false
          },
          {
            username: 'yejian',
            nickname: '叶剑',
            role: '普通用户',
            editable: false
          },
          {
            username: 'yejian',
            nickname: '叶剑',
            role: '普通用户',
            editable: false
          }
        ],
        value: '',
        keyword: '',
        roleList: [
          {
            value: '普通用户',
            label: '普通用户'
          },
          {
            value: '管理员',
            label: '管理员'
          }
        ],
        newAdminData: {
          username: '',
          nickname: '',
          password: ''
        },
        formRules: ''
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          const items = response.data.items
          this.list = items.map(v => {
            this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
            v.originalTitle = v.title //  will be used when user click the cancel botton
            return v
          })
          this.listLoading = false
        })
      },
      handleEdit(rowData) {
        console.log(rowData)
        this.$message({
          message: '更改成功',
          type: 'success'
        })
        rowData.edit = false
      },
      handleSearch() {

      },
      handleAdd(){
        this.dialogFormVisible = true
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    .search-box{
      width: 200px;
      margin-bottom: 20px;
    }
  }
</style>
